<template>
    <t-dialog
      header="生成测试计划"
      :visible.sync="showDialogTestplan"
      @confirm="onConfirm"
      :confirmOnEnter="true"
      :onConfirm="onConfirmAnother"
      :onCancel="onCancel"
      :onEscKeydown="onKeydownEsc"
      :onCloseBtnClick="onClickCloseBtn"
      :onOverlayClick="onClickOverlay"
      :onClose="close"
      width='60%'
      >
      <t-space size="32px">
      <t-form
        :data="formData"
        :rules="FORM_RULES"
        labelWidth="calc(2em + 100px)"
        ref="form"
        scrollToFirstError="smooth"
        width='400%'
      >
      <t-form-item label="测试计划名" style="margin-top: 20px;">
          <t-input v-model="formData.testplan_name" style="margin-right: 10px;width: 300px;"></t-input>
      </t-form-item>
      <t-form-item label="定时任务" name="cron_state">
        <t-switch size="large" v-model="formData.cron_state" :label="['开启', '关闭']" @onChange="changeCronState" :custom-value="customValue"></t-switch>
      </t-form-item>
      </t-form>
    </t-space>
    </t-dialog>
  </template>
  
<script lang="jsx">
import { operateTestPlan } from '@/api/requestApi'

const INITIAL_FORM_DATA = {
  testplan_name: '',
};
const FORM_RULES = {
  testplan_name: [{ required: true, message: '请输入名称', type: 'error' }],
};
export default {
  name: 'TestPlanDialogComp',
  props: {
    showChildDialogTestplan: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formData: {...INITIAL_FORM_DATA},
      FORM_RULES: {...FORM_RULES},
      testcase_id: [],
      customValue: [2, 1, 0]
    }
  },
  computed: {
    showDialogTestplan: {
      get() {
        return this.showChildDialogTestplan
      },
      set(newValue) {
        this.$emit('update:showChildDialogTestplan', newValue) // 触发更新事件，父组件的showDialogTestplan会自动更新
      }
    },
  },
  methods: {
    init(data) {
      // this.showDialog=true;
      // data是父组件弹窗传递过来的值，我们可以打印看看
      this.testcase_id = Object.values(data);
      //   console.log('来自父组件的', data);
      
    },
    onConfirm(){
      const reqParam = {"ids":[],"op_type": '',"param": {'testcase_id': [], 'testplan_name': ''}}
      reqParam.param.testcase_id = this.testcase_id;
      //   reqParam.param.testcase_id = ['1', '2']
      reqParam.param.testplan_name = this.formData.testplan_name;
      if (this.formData.cron_state === undefined) {
        this.formData.cron_state = 0;
      }   
      reqParam.param.cron_state = this.formData.cron_state; 
      reqParam.op_type = '1';
      // console.log('请求参数--->', reqParam)
      this.$request
        .post(operateTestPlan(),reqParam)
        .then((res) => {
          if (res.data.code === "000") {
            this.$message.success(res.data.msg);
          } else {
            this.$message.error(res.data.data.msg)
          }
        })
        .catch((e) => {
          console.log(e);
        })
        .finally(() => {
          this.dataLoading = false;
        });
      this.showDialogTestplan = false;
    },
    onConfirmAnother() {
      this.showDialogTestplan = false;
      // this.$emit('runFlush')
      console.log('点击了确认按钮');
    },
    close() {
      this.showDialogTestplan = false;
      // this.$emit('addOrUpdateVisible', false)
      console.log('关闭弹窗，点击关闭按钮、按下ESC、点击蒙层等触发');
    },
    onCancel() {
      this.showDialogTestplan = false;
      console.log('点击了取消按钮');
    },
    onKeydownEsc() {
      this.showDialogTestplan = false;
      console.log('按下了ESC');
    },
    onClickCloseBtn() {
      this.showDialogTestplan = false;
      console.log('点击了关闭按钮');
    },
    onClickOverlay() {
      this.showDialogTestplan = false;
      console.log('点击了蒙层');
    },
    changeCronState(val) {
      console.log(val);
    },
  }
}
</script>

<style lang="less" scoped>

</style>
